<template>
	<!-- <custom-nav-bar></custom-nav-bar> -->
	<view class="classlist">
		<view class="loading" v-if="!classList.length && !noData">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		<view class="content">
			<navigator :url="`/pages/preview/preview?id=${item._id}`" class="item" v-for="item in classList" :key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>
		<view class="loading" v-if="classList.length || noData">
			<uni-load-more :status="noData? 'noMore':'loading'"></uni-load-more>
		</view>
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from "@dcloudio/uni-app"
	import {
		getClassListApi,getUserDoScApi
	} from '@/api/api.js'
	/* 获取查询参数 和 自定义data参数 --1*/
	const queryParams = {
		pageNum: 1,
		pageSize: 20
	};
	/* 类别详情 */
	const classList = ref([]);
	const getClassList = async () => {
		let res;
		console.log("类别详情queryParams1", queryParams);
		if (queryParams.classid) {
			console.log("类别详情queryParams2", queryParams);
			res = await getClassListApi(queryParams);
		}
		if (queryParams.type) res = await getUserDoScApi(queryParams)
		console.log("类别详情", res);
		if (queryParams.pageSize > res.data.length) {
			console.log("queryParams.pageSize > res.data.length");
			noData.value = true;
		}
		classList.value = [...classList.value, ...res.data];
		/* 缓存数据 */
		uni.setStorageSync("storageclassList",classList);
	}
	/* 获取查询参数 和 自定义data参数--2*/
	onLoad((e) => {
		console.log(e);
		/* if (!e.id) {
			uni.reLaunch({
				url:'/pages/index/index'
			})
		} */
		if (e.id) queryParams.classid = e.id;
		if (e.type) queryParams.type = e.type;
		uni.setNavigationBarTitle({
			title: e.name
		})
		getClassList();
	})
	/* 触底刷新 和 防抖 */
	let timerid = null;
	const noData = ref(false);
	onReachBottom(() => {
		if (noData.value) {
			console.log("触底不刷新");
			/* const div = document.createElement("div");
			div.innerHTML = "没有更多了...";
			div.style.display = "flex";
			div.style.justifyContent = "center";
			div.style.alignContent = "center";
			const content = document.querySelector(".classlist");
			content.appendChild(div); */
			return ;
		}
		console.log("触底刷新");
		clearTimeout(timerid);
		timerid = setTimeout(() => {
			console.log("发送请求")
			queryParams.pageNum++;
			getClassList();
		}, 1000)

	})
	/* 下拉刷新 */
	onPullDownRefresh(() => {
		console.log("下拉刷新");
		classList.value = [];
		queryParams.pageNum++;
		getClassList();
		uni.stopPullDownRefresh()
	})
	/*  */
</script>

<style lang="scss" scoped>
	.classlist {
		padding: 5rpx;

		.content {
			padding: 5rpx;
			display: grid;
			gap: 5rpx;
			grid-template-columns: repeat(3, 1fr);

			.item {
				height: 440rpx;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
	}
</style>